<template>
	<view class="content">
		<view class="appraise-user-item" v-for="(item,index) in list" :key="index" v-if="index < (num? num: list.length)">
			<!-- 评价用户信息 -->
			<view class="appraise-user-info">
				<view class="appraise-user-info-left unify-flex">
					<image class="appraise-user-info-left-image" :src="errorImage" mode=""></image>
					<view class="appraise-user-info-left-r">
						<view class="nickname unify-weight">{{item.nickname}}</view>
						<view class="appraise_time">{{item.appraise_time}}</view>
					</view>
				</view>
			</view>

			<!-- 评价内容 -->
			<view class="appraise-content">{{item.appraise_content}}</view>

			<!-- 评价图片 -->
			<view class="appraise-image" :style="{'margin': item.appraise_image.length > 3? '0 0 0 120rpx': ''}">
				<view class="appraise-image-h unify-flex"
					v-if="item.appraise_image.length < 3 || item.appraise_image.length > 3">
					<image
						:class="{'appraise-image-item1': item.appraise_image.length === 1, 'appraise-image-item2': item.appraise_image.length === 2, 'appraise-image-item4': item.appraise_image.length > 3}"
						:src="item2 || errorImage" mode="" v-for="(item2,index2) in item.appraise_image" :key="index2"
						@tap="tapPreviewImg(index, index2)"></image>
				</view>

				<view class="appraise-image-item3 unify-flex" v-else-if="item.appraise_image.length === 3">
					<image class="appraise-image-item3-left" :src="item.appraise_image[0] || errorImage" mode="" @tap="tapPreviewImg(index, 0)">
					</image>

					<view class="appraise-image-item3-right unify-relative">
						<image class="appraise-image-item3-right-i" :src="item.appraise_image[1] || errorImage" mode="" @tap="tapPreviewImg(index, 1)">
						</image>
						<image class="appraise-image-item3-right-i appraise-image-item3-right-abs unify-absolute"
							:src="item.appraise_image[1] || errorImage" mode="" @tap="tapPreviewImg(index, 1)"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			num: { // 显示多少条
				type: Number,
				default: 0 
			}
		},
		data() {
			return {
				errorImage: this.$mAssetsPath.errorImage,
				list: [{
					nickname: '青山折扇', // 用户昵称
					userAvatar: '', // 用户头像
					is_hot: 1, // 是否好评  0差评  1好评
					appraise_content: '包装严实，保温良好送来的时候还特别热乎，味道非常好吃，肉真的绝了', // 评价内容
					appraise_image: ["", "", "", "", ""], // 评价图片
					appraise_time: '2022-3-28', // 评价时间
				}, {
					nickname: '青山折扇', // 用户昵称
					userAvatar: '', // 用户头像
					is_hot: 1, // 是否好评  0差评  1好评
					appraise_content: '包装严实，保温良好送来的时候还特别热乎，味道非常好吃，肉真的绝了', // 评价内容
					appraise_image: [""], // 评价图片
					appraise_time: '2022-3-28', // 评价时间
				}, {
					nickname: '青山折扇', // 用户昵称
					userAvatar: '', // 用户头像
					is_hot: 1, // 是否好评  0差评  1好评
					appraise_content: '包装严实，保温良好送来的时候还特别热乎，味道非常好吃，肉真的绝了', // 评价内容
					appraise_image: [""], // 评价图片
					appraise_time: '2022-3-28', // 评价时间
				}]
			}
		},
		methods: {
			// 预览图片
			tapPreviewImg(index, index2) {
				let list = this.list;
				uni.previewImage({
					current: list[index].appraise_image[index2],
					urls: list[index].appraise_image
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.appraise-user-item {
		padding: 30rpx 0;
		border-bottom: 2rpx solid rgba($color: #000000, $alpha: .02);
	}

	.appraise-user-info-left {
		align-items: center;
	}

	.appraise-user-info-left-image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}

	.appraise-user-info-left-r {
		margin-left: 20rpx;
	}

	.nickname {
		font-size: 30rpx;
	}

	.appraise_time {
		font-size: $uni-font-size-sm;
		color: $uni-text-color-grey;
		margin-top: 10rpx;
	}

	// 评价内容
	.appraise-content {
		margin: 20rpx 0 0 120rpx;
		font-size: $uni-font-size-base;
	}

	// 评价图片
	.appraise-image {
		margin-left: 120rpx;
		margin: 20rpx 0 0 120rpx;
	}

	.appraise-image-h {
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.appraise-image-item1 {
		width: 405rpx;
		height: 405rpx;
		border-radius: $uni-border-radius-gl;
	}

	.appraise-image-item2 {
		width: 275rpx;
		height: 275rpx;
		border-radius: $uni-border-radius-gl;
	}

	.appraise-image-item3 {
		justify-content: space-between;
	}

	.appraise-image-item4 {
		width: 176rpx;
		height: 176rpx;
		margin-top: 20rpx;
	}

	.appraise-image-h::after {
		content: '';
		width: 176rpx;
	}

	.appraise-image-item3-left {
		width: 370rpx;
		height: 370rpx;
		border-radius: $uni-border-radius-gl;
	}

	.appraise-image-item3-right-i {
		width: 176rpx;
		height: 176rpx;
	}

	.appraise-image-item3-right-abs {
		bottom: 0;
		right: 0;
	}
</style>
